<template>
	<view class="page">
		<view class="header">

			<view class="cover">
				<image :src="book.cover"></image>
			</view>
			<view class="info">
				<view class="title">{{title}}</view>
				<view class="info">{{book.autor}}</view>
				<view class="info">{{book.time}}</view>
				<view class="info">{{book.newTitle}}</view>
			</view>
		</view>

		<view class="button">
			<!-- <button class="bt" size="mini" type="primary" @click="addBook">加入书架</button>
			<button class="bt" size="mini" type="primary" @click="h5Read">原网页阅读</button> -->
			<button class="bt" size="mini" type="primary" @click="read">立即阅读</button>
		</view>
		<!-- <ad :unit-id="ad_video_id" ad-type="video" ad-theme="white"></ad> -->

		<uni-group :title="title+'小说简介'">
			<view class="p10 intro">
				{{book.desc}}
			</view>
		</uni-group>

		<uni-group title="正文">
			<uni-list>
				<uni-list-item clickable v-for="(item,index) in cataList" :key="index" :title="item.title"
					@click="read" />
			</uni-list>
		</uni-group>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				//书名
				title: '',

				//书地址
				url: '',
				//章节列表
				cataList: [],

				book: {},
				// ad_video_id: process.env.AD_VIDEO_ID
			}
		},
		onLoad(options) {
			this.title = options.title;
			this.url = options.url;


			uni.setNavigationBarTitle({
				title: this.title || "详情"
			})

			this.getInfo();
		},
		methods: {

			getInfo() {
				uni.showLoading({
					title: "书籍加载"
				})
				var that = this;
				
			
				
				
				uniCloud.callFunction({
					name: 'router',
					data: {
						action: 'bookShop/getBookInfo',
						data: {
							url: decodeURIComponent(this.url),
						}
					}
				}).then(res => {



					this.book = res.result.book;
					this.cataList = res.result.cata;

					uni.hideLoading();

				})
			},
			//加入书架
			addBook() {
				var list = uni.getStorageSync("book");
				if (!list) {
					list = [];
				}
				// var doms = decodeURIComponent(this.url).split("/");
				// var id = doms[doms.length - 2];
				// list.push();
				var model = list.filter(a => {
					return a.bookId == decodeURIComponent(this.url)
				});
				if (model && model.length > 0) {
					uni.showToast({
						title: '书籍已经在书架中了'
					});
					return;
				}
				list.splice(0, 0, {
					title: this.title,
					cover: this.book.cover,
					url: decodeURIComponent(this.url),
					bookId: decodeURIComponent(this.url)
				})
				uni.setStorage({
					key: "book",
					data: list,
					success: () => {
						uni.navigateBack({
							delta: 1
						})
					},
					fail: (err) => {

					}
				});


			},
			h5Read() {
				uni.navigateTo({
					url: `/pages/webview/index?url=${this.url}`
				});
			},
			read() {

				uni.navigateTo({
					url: `/reading/pages/read/index?title=${this.title}&index=0&url=${this.url}`
				});
			}
		}

	}
</script>


<style lang="scss">
	.page {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.p10 {
		padding: 10px;
	}

	.header {
		display: flex;
		flex-direction: row;
		padding: 10px;

		.cover {
			padding: 5px;
			border: 1px solid lightgray;

			image {
				width: 92px;
				height: 116px;
			}
		}

		.info {
			padding: 5px;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.title {
				font-size: 16px;
				font-weight: bold;
			}

			.info {
				font-size: 12px;
				font-color: #999999
			}

		}
	}

	.button {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-top: 10px;
		margin-bottom: 10px;

		.bt {
			width: 30%
		}
	}

	.intro {
		font-size: 12px;
		font-color: #999999
	}
</style>